<template>
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" height="300px"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"/>
      <el-table-column label="存货编码" prop="code"/>
      <el-table-column label="存货名称" prop="name"/>
      <el-table-column label="规格型号" prop="specModel"/>
      <el-table-column label="存货分类" prop="classifyName"/>
      <el-table-column label="计量单位" prop="unitName"/>
      <el-table-column label="税率" align="center" prop="taxRate">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.WMS_TAX_RATE" :value="scope.row.taxRate"/>
        </template>
      </el-table-column>
      <el-table-column label="批次管理" align="center" prop="isBatch">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.WMS_INVENTORY_IS_BATCH" :value="scope.row.isBatch"/>
        </template>
      </el-table-column>
      <el-table-column label="品牌" prop="brand"/>
      <el-table-column label="现存量" prop="quantity"/>
    </el-table>
    <!-- 分页 -->
    <Pagination :total="total" v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize" @pagination="getList"/>
  </ContentWrap>
</template>

<script setup lang="ts">
import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import {InventoryStockApi, InventoryStockVO} from '@/api/wms/inventory/stock'
import InventoryClassifyTree from "../InventoryClassifyTree.vue";
import {InventoryVO} from "@/api/wms/inventory";

/** 存货档案 列表 */
defineOptions({name: 'InventoryStock'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<InventoryStockVO[]>([]) // 列表的数据
const formData = ref<InventoryVO[]>([])
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  code: undefined,
  name: undefined,
  specModel: undefined,
  classifyId: undefined,
  isBatch: undefined,
  brand: undefined,
})
const dialogVisible = ref(false);
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

const open = () => {
  dialogVisible.value = true;
  getList();
};

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await InventoryStockApi.getInventoryStockPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 查询存货 */
const remoteInventory = (query: string) => {
  if (query) {
    setTimeout(async () => {
      list.value = await InventoryStockApi.getInventoryStockSimpleList(query)
    }, 200)
  } else {
    setTimeout(async () => {
      const data = await InventoryStockApi.getInventoryStockPage({})
      list.value = data.list
    }, 100)
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const handleSelectionChange = (selection: InventoryVO[]) => {
  formData.value = selection;
};

/** 处理分类树被点击 */
const handleClassifyNodeClick = async (row) => {
  queryParams.classifyId = row.id
  await getList()
}

const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const handleSubmit = () => {
  dialogVisible.value = false;
  // 触发 success 事件，并传递表单数据
  emit('success', formData);
};

</script>
